<template>
    <div class="carousel-list-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>轮播图列表</span>
                <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        icon="el-icon-plus"
                        @click="goToAdd">
                    添加轮播图
                </el-button>
            </div>

            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item label="轮播图标题">
                        <el-input
                                v-model="searchForm.searchTitle"
                                placeholder="请输入轮播图标题"
                                clearable
                                @clear="handleSearch">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select
                                v-model="searchForm.searchActive"
                                placeholder="请选择状态"
                                clearable
                                @change="handleSearch">
                            <el-option label="启用" :value="true"></el-option>
                            <el-option label="禁用" :value="false"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                                type="primary"
                                icon="el-icon-search"
                                @click="handleSearch">
                            搜索
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 表格区域 -->
            <el-table
                    :data="CarouselInfo"
                    border
                    style="width: 100%"
                    v-loading="loading">

                <el-table-column
                        prop="carouselId"
                        label="ID"
                        width="80"
                        align="center">
                </el-table-column>

                <el-table-column
                        label="轮播图"
                        width="180"
                        align="center">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 160px; height: 80px"
                                :src="scope.row.imageUrl"
                                fit="cover"
                                :preview-src-list="[scope.row.imageUrl]">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="title"
                        label="标题"
                        width="180">
                </el-table-column>



                <el-table-column
                        label="状态"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isActive"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="handleStatusChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="180">
                    <template slot-scope="scope">
                        {{ formatDateTime(scope.row.createTime) }}
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="180"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <div class="pagination-area">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="PageList"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>

        <!-- 删除确认对话框 -->
        <el-dialog
                title="提示"
                :visible.sync="deleteDialogVisible"
                width="30%">
            <span>确定要删除这条轮播图吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmDelete">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑对话框 -->
        <el-dialog
            title="编辑轮播图"
            :visible.sync="editDialogVisible"
            width="50%">
            <el-form :model="editForm" label-width="100px">
                <el-form-item label="轮播图标题">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>

                <el-form-item label="轮播图图片">
                    <el-upload
                        name="photo"
                        action="http://localhost:8888/product/upload"
                        :on-success="handleImageSuccess"
                        :show-file-list="false">
                        <el-image
                            v-if="editForm.imageUrl"
                            :src="editForm.imageUrl"
                            style="width: 160px; height: 80px"
                            fit="cover">
                        </el-image>
                        <span v-else>点击上传图片</span>
                    </el-upload>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">保 存</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { formatDateTime } from '@/utils/date'

export default {
    name: 'CarouselList',
    data() {
        return {
            //查询条件
            searchForm: {
                searchTitle: '',
                searchActive: null
            },

            CarouselInfo: [],//轮播图对象
            loading: false,

            //分页条件
            currentPage:1,
            PageList:[5,10,15,20],
            pageSize:5,
            total:0,
            vo:{},

            // 编辑对话框相关
            editDialogVisible: false, // 控制编辑对话框显示
            editForm: {
                carouselId: null,
                title: '',
                imageUrl: '',
            },

            deleteDialogVisible: false,

            currentDeleteId: null,//获取要删除的id

            actives:1,
        }
    },

    methods: {
        // 格式化日期
        formatDateTime,

        // 获取数据
        fetchData() {
            this.loading = true
            this.$axios.post(`/carousel/AllCarousel/${this.currentPage}/${this.pageSize}`, this.vo).then(response => {
                    this.CarouselInfo = response.data.list
                    this.total = response.data.total
                })
                .catch(error => {
                    this.$message.error('获取数据失败: ' + error.message)
                })
                .finally(() => {
                    this.loading = false
                })
        },

        // 搜索
        handleSearch() {
            this.searchForm = this.vo
            this.fetchData()
        },

        // 分页大小改变
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData()
        },

        // 当前页改变
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },

        // 状态切换
        handleStatusChange(row) {
            console.log(333,row.isActive)
            if (row.isActive === false){
                this.actives = 0;
            }
            this.$axios.post(`carousel/updateActive/${row.carouselId}/${this.actives}`).then(r => {
                if (r.data == 'yes'){
                    this.$message.success('状态更新成功')
                }

                })
                .catch(error => {
                    this.$message.error('状态更新失败: ' + error.message)
                    // 恢复原状态
                    row.isActive = !row.isActive
                })
        },

        // 跳转到添加页面
        goToAdd() {
            this.$router.push('/addCarousel')
        },

        // 编辑
        handleEdit(row) {
            this.editForm = {...row}
            this.editDialogVisible = true
        },

        // 删除
        handleDelete(row) {
            this.currentDeleteId = row.carouselId
            this.deleteDialogVisible = true
        },
        // 保存编辑
        saveEdit() {
            this.$axios.post(`carousel/CarouselUpdate`, this.editForm).then(response => {
                        this.$message.success('保存成功')
                        this.editDialogVisible = false // 关闭对话框
                        this.fetchData() // 刷新表格数据
                })
                .catch(error => {
                    this.$message.error('保存失败: ' + error.message)
                    this.editDialogVisible = false // 关闭对话框
                })
        },
        // 确认删除
        confirmDelete() {
            alert(222)
            this.$axios.delete(`carousel/deleteCarousel/${this.currentDeleteId}`)
                .then(() => {
                    this.$message.success('删除成功')
                    this.deleteDialogVisible = false
                    this.fetchData()
                })
                .catch(error => {
                    this.$message.error('删除失败: ' + error.message)
                    this.deleteDialogVisible = false
                })
        },
        // 图片上传成功回调
        handleImageSuccess(res, file) {
            // 假设返回的res中有imageUrl字段
            this.editForm.imageUrl = res
            this.$message.success('图片上传成功')
        },
    },

    created() {
        this.fetchData()
    },
}
</script>

<style scoped>
.carousel-list-container {
    padding: 20px;
}

.box-card {
    max-width: 1200px;
    margin: 0 auto;
}

.search-area {
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
}

.pagination-area {
    margin-top: 20px;
    text-align: right;
}

/* 编辑对话框样式 */
.el-dialog {
    max-width: 600px;
}
.carousel-list-container {
    padding: 20px;
}

.box-card {
    max-width: 1200px;
    margin: 0 auto;
}

.search-area {
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
}

.pagination-area {
    margin-top: 20px;
    text-align: right;
}
</style>